<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<script type="text/javascript" src="../../js/boot.js"></script>
		<title>数据字典管理</title>
	</head>

	<body>
		<div class="mini-splitter" style="width: 100%; height: 100%;">
			<div size="400" showCollapseButton="true">
				<div class="mini-fit">
					<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
						<a class="mini-button" iconCls="icon-add" onclick="openAddWin()">添加</a>
						<a class="mini-button" iconCls="icon-remove" onclick="doDelete()">删除</a>
						<a class="mini-button" iconCls="icon-save" onclick="doSave()">保存</a>
					</div>
					<div class="mini-fit">
						<div id="tableGrid" class="mini-datagrid" style="width:100%;height:100%;" showPager="false" allowResize="true" allowCellEdit="false" allowCellSelect="true" editNextOnEnterKey="true" editNextRowCell="true">
							<div property="columns">
								<div field="index" type="indexcolumn" width="30"></div>
								<div name="tableName" field="tableName" headerAlign="center" width="150">名称
									<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
								</div>
								<div name="tableTitle" field="tableTitle" headerAlign="center" width="150">说明
									<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div showCollapseButton="true">
				<div class="mini-fit">
					<div id="fieldGrid" class="mini-datagrid" style="width:100%;height:100%;" showPager="false" allowResize="true" allowCellEdit="true" allowCellSelect="true" editNextOnEnterKey="true" editNextRowCell="true">
						<div property="columns">
							<div field="+" value="+" width="20">+</div>
							<div field="index" type="indexcolumn" width="30"></div>
							<div name="id" field="id" headerAlign="center" width="250">键
								<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
							</div>
							<div name="text" field="text" headerAlign="center" width="250">值
								<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
							</div>
							<div name="sequence" headerAlign="center">排序</div>
							<div field="-" value="-" width="20">-</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="editWin" class="mini-window" title="" style="width:380px;height:200px;" showMaxButton="true" showCollapseButton="true" showShadow="true" showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
			<div id="editForm" style="padding:10px;">
				<table align="center">
					<tr>
						<td align="right">名称：</td>
						<td align="left"><input name="tableName" class="mini-textbox" required="true" style="width: 240px;"></td>
					</tr>
					<tr>
						<td align="right">说明：</td>
						<td align="left"><input name="tableTitle" class="mini-textbox" required="true" style="width: 240px;"></td>
					</tr>
					<tr>
						<td align="right"></td>
						<td align="left">
							<a class="mini-button" iconCls="icon-save" onclick="doAddTable()">保存</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		miniInit();
		var tableGrid = mini.get("tableGrid");
		var fieldGrid = mini.get("fieldGrid");
		var editWin = mini.get("editWin");
		var editForm = new mini.Form("#editForm");
		var db1 = new mini.DataBinding();
		db1.bindForm("editForm", tableGrid);
		editWin.setTitle("字典信息");
		// 加载字典js文件中的数据
		var list = [];
		for(var obj in CONST) {
			var bean = CONST[obj];
			if(bean.title) {
				list.push({
					"tableName": obj,
					"tableTitle": bean.title,
					"data": bean.data
				});
			}
		}
		tableGrid.setData(list);
		// 左边字典名称切换事件
		tableGrid.on("selectionchanged", function(e) {
			// debugger
			var data = tableGrid.getSelected();
			if(data) {
				if(data.data) {
					fieldGrid.setData(data.data);
				} else {
					fieldGrid.setData([]);
				}
			}
		});
		// 左边字典双击选择事件，弹窗编辑字典名称和说明
		tableGrid.on("rowdblclick", function(e) {
			var item = e.record;
			editForm.setData(item);
			editWin.showAtPos('center', 'middle');
		});
		/*******************************************
		 * 字段表格的渲染事件
		 *******************************************/
		fieldGrid.on("drawcell", function(e) {
			//action列，超连接操作按钮
			if(e.column.name == "sequence") {
				var uid = e.record._uid;
				e.cellStyle = "text-align:center";
				e.cellHtml = '<a href="javascript:fieldGridMoveRow(\'' + uid + '\', -1)">上移</a>&nbsp; ' +
					'<a href="javascript:fieldGridMoveRow(\'' + uid + '\', +2)">下移</a>';
			} else if(e.column.header == "+") {
				e.cellHtml = "+";
			} else if(e.column.header == "-") {
				e.cellHtml = "-";
			}
		});
		// 移动行数据
		function fieldGridMoveRow(row_uid, count) {
			var row = fieldGrid.getRowByUID(row_uid);
			var index = fieldGrid.indexOf(row);
			fieldGrid.moveRow(row, index + count);
		}
		// 标题栏点击事件
		fieldGrid.on("headercellclick", function(e) {
			// 如果点击了标题栏的加号，则增加一行
			if(e.column.header == "+") {
				addField(0);
			}
		});
		// 单元格点击事件
		fieldGrid.on("cellclick", function(e) {
			var data = fieldGrid.getSelected();
			var index = fieldGrid.indexOf(data);
			var header = e.column.header;
			// 如果点击了加号一列的单元格，则在当前行下面增加一行
			if(header == "+") {
				addField(index + 1);
			}
			// 如果点击了减号一列的单元格，则删除当前行
			else if(header == "-") {
				mini.confirm("确认删除该数据信息吗？", "删除操作", function(e) {
					if(e == "ok") {
						fieldGrid.removeRow(data);
					}
				});
			}
		});
		// 在指定的行号处添加一行记录
		function addField(index) {
			fieldGrid.addRow({
				"_+": "+",
				"_-": "-"
			}, index);
		}
		// 单元格双击击事件，显示字段的详细编辑窗体
		fieldGrid.on("rowdblclick", function(e) {
			// var data = fieldGrid.getSelected();
			editFieldWin.showAtPos('center', 'middle');
		});
		// 右侧单元格编辑完成后保存至数据结构中
		fieldGrid.on("cellcommitedit", function(e) {
			var data = tableGrid.getSelected();
			if(data) {
				data.data = fieldGrid.getData();
			}
		});

		var isOpenAddWin = false;
		/*******************************************
		 * 打开新增窗体
		 *******************************************/
		function openAddWin() {
			isOpenAddWin = true;
			var len = tableGrid.getData().length;
			tableGrid.addRow({}, tableGrid.getData().length);
			tableGrid.setSelected(tableGrid.getData()[len]);
			fieldGrid.setData([]);
			editWin.showAtPos('center', 'middle');
		}

		/*******************************************
		 * 保存新增表数据
		 *******************************************/
		function doAddTable() {
			isOpenAddWin = false;
			editWin.hide();
		}

		/*******************************************
		 * 保存至后台生成js文件
		 *******************************************/
		function doSave() {
			mini.confirm("确定要保存吗？", "确定？",
				function(action) {
					if(action == "ok") {
						var all = tableGrid.getData();
						var data = {
							json: mini.encode(all)
						}
						http.post("/admin/dic/save.do", data, function(page) {
							if(page.success) {
								mini.alert("保存成功", "提示", null);
							} else {
								mini.alert(page.message, "保存失败", null);
							}
						});
					}
				}
			);
		}

		/*******************************************
		 * 删除
		 *******************************************/
		function doDelete() {
			if(tableGrid.getSelected()) {
				mini.confirm("确定要删除选中的记录吗？", "确定？",
					function(action) {
						if(action == "ok") {
							var row = tableGrid.getSelected();
							tableGrid.removeRow(row, true);
						}
					});
			} else {
				mini.alert("请先选择要删除的记录！", "错误", null);
			}
		}
	</script>

</html>